<template>
    <div>
        <van-cell class="article-item">
            <template #title>
                <div class="head" style="display: flex;">
                    <div style=" margin-right: 10px;width: 30px;">
                        <img :src="item.avatar" alt="" style="width: 25px;height: 25px; margin-top: 5px;" />
                    </div>
                    <div class="con">
                        <p class=title van-ellipsis style="color: darkorange; ">{{ item.stem }}</p>
                        <p class="other" style="color: lightgray;;">{{ item.creator }} {{ item.createdAt }}</p>
                    </div>
                </div>
            </template>
            <template #label>
                <div class="body van-multi-ellipsis--12" style="color: black;
                display: -webkit-box; 
                overflow:hidden;
                text-overflow: elipsis;
                word-break: break-all;
                -webkit-box-orient:vertical;
                -webkit-line-clamp: 2 
                border: 1px solid saddlebrown;
          ">
                    <p v-html="item.content" style="font-size: 14px;"></p>
                </div>
                <div class="foot">点赞 {{ item.likeCount }} 浏览 {{ item.views }}</div>
            </template>
        </van-cell>
    </div>
</template>

<script>
export default {
    name: 'ArticleItem',
    props: { item: Object }
}
</script>

<style></style>